$baseFontSize: 14px!default;       
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
@mixin box(){
	display: -webkit-box;
	display:flex;
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
}
@mixin flex{
	flex:1;
	-webkit-flex: 1;
	-moz-flex: 1;
	-webkit-box-flex: 1;
	-ms-flex: 1;
}
a{
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
html,body{
  font-size:$baseFontSize;
}
.bgF{background: #fff;}
.color-81{color: #81838e;}
.color-25{color: #252525;}
.color-f2{color: #f23030; }
// header
.jd-header-top{
	width: 100%;
	background: #fafafa;
	position: relative;
	border-bottom: 1px solid #d7d7d7;
	.jd-header-back{
		position: absolute;
		left: 10px;
		top: 12px;
		span{
			background: url(../img/jd-sprites.png) no-repeat -23px 0;
			display: inline-block;
			width: 19px;
			height: 20px;
			background-size: 200px 200px;
		}
	}
	.jd-header-my{
		margin: 0 80px;
		overflow:hidden;
		text-align: center;
		line-height: 42px;
		@include box;
		li{
			@include flex;
			white-space:nowrap;
			overflow:hidden;
			a{
				color: #222222;
				display: inline-block;
				padding: 0 2px;
			}
			a.active{
				font-weight: bold;
				border-bottom: 2px solid #222;
			}
		}
	}
	.jd-header-coll{
		position: absolute;
		top: 12px;
		right: 10px;
		i{
			background: url(../img/jd-sprites.png) no-repeat -60px 0;
			display: inline-block;
			width: 20px;
			height: 20px;
			background-size: 200px 200px;
		}
	}
	.jd-header-menu{
		width: 100%;
		height: 57px;
		position: relative;
		background: #404042;
		display: none;
		li.active{
			background:#2d2d2d;
		}
		li{
			width: 25%;
			height: 100%;
			float: left;
			text-align: center;
			span{
				width: 30px;
				height: 26px;
				display: block;
				margin: 10px auto 0;
				background: url(../img/jd-sprites.png) no-repeat;
				background-size: 200px 200px;
			}
			em{
				color: #fff;
				font-size: 12px;
			}
			.home{
				background-position: -30px -31px;
			}
			.search{
				background-position: -60px -31px;
			}
			.buycar{
				background-position: -90px -31px;
			}
			.mineJd{
				background-position: -120px -31px;
			}
		}
	}
}
// banner
.jd-banner{
	max-width: 640px;
	position: relative;
	cursor: pointer;
	.banner-ul{
		li{
			overflow: hidden;
			text-align:center;
			img{
				width: 100%;
				max-width: 640px;
				max-height: 100%;
				overflow: hidden;
			}
		}
	}
	.swiperPoint{
		position: absolute;
		right: 15px;
		bottom: 10px;
		width: 40px;
		height: 40px;
		background: rgba(0,0,0,.15);
		border-radius: 50% 50%;
		z-index: 11;
		color: #fff;
		text-align: center;
		line-height: 40px;
		font-size: 12px;
		span{
			font-size: 14px;
		}
	}
}
.jd-section{
	.jd-section-li{
		width: 100%;
		height: 100%;
	}
	.jd-section-li-first{background: #f0f2f5;}
	.jd-section-li-second{background: red;display:none;}
	.jd-section-li-third{background: green;display:none;}
}
// goodsInfo
.goodsInfo{
	width: 100%;
	margin-bottom: 7px;
	border-top: 1px solid #f1f2f4;
	border-bottom: 1px solid #f1f2f4;
	padding: 8px 10px;
	box-sizing: border-box;
	.goods-name{
		line-height: 20px;
		em{
			display: inline-block;
			background: #f23030;
			height: 14px;
			line-height: 14px;
			width: 28px;
			color: #fff;
			text-align: center;
			font-size: 11px;
			margin-right: 5px;
		}
		span{
			color: #232326;
			font-size: 16px;
		}
	}
	.goods-price{
		margin-top: 8px;
		line-height: 20px;
		span{
			color: #f23636;
			font-weight: bold;
			b{
				font-size: 18px;
				font-weight: bold;
			}
		}
		em{
			width: 61px;
			text-align: center;
			line-height: 24px;
			font-size: 11px;
			height: 24px;
			border: 1px solid #e7e7e7;
			color: #686868;
			border-radius: 2px;
		}
	}
	.goods-intro{
		color: #81838e;
		line-height: 18px;
		a{
			margin-left: 9px;
			text-decoration: underline;
		}
	}
}
.promotion{
	border-top: 1px solid #e9ebef;
	border-bottom: 1px solid #e9ebef; 
	padding-left: 10px;
	padding-bottom: 13px;
	margin-bottom: 8px;
	.pro-white{
		padding: 16px 0;
		border-bottom: 1px solid #f1f2f4;                              
		i{margin-right: 15px;}
	}
	.pro-sale{
		padding-top: 14px;
		position: relative;
		overflow: hidden;
		.coll-hide-inline{display:inline-block;}
		.coll-hide{display:none;}
		.sale-top{
			span{margin-left: 34px;}
			i{
				position: absolute;
				margin-right: 8px;
			}
		}
		.slide-bg{
			position: absolute;
			right: 12px;
			width: 15px;
			height: 15px;
			background: url(../img/product-detail-sprites-mjs.png) no-repeat 4px 6px;
			background-size: 100px 100px;
		}
		.slide-bg.active{
			background: url(../img/product-detail-sprites-mjs.png) no-repeat 4px -6px;
			background-size: 100px 100px;
		}
		// }
		.sale-body{
			margin-left: 40px;
			width: 90%;
			overflow: hidden;
			.sale-list{margin-right: 40px;}
			.sale-con.active{
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.sale-con{
				p{
					margin-bottom: 7px;
					line-height: 14px;
					em{
						position: absolute;
						right: 10px;
						height: 15px;
						width: 15px;
						background: url(../img/product-detail-sprites-mjs.png) no-repeat 5px -15px;
						background-size: 100px 100px;
					}
					i{
						display:inline-block;
						vertical-align: top;
					}
					a{
						margin-left: 5px;
						span{
							line-height: 18px;
							margin-right: -25px;
							display: inline-block;
							width: 79%;
						}
					}
				}
			}
			.borRed{
				font-size: 11px;
				border: 1px solid #fab2b2;
				border-radius: 1px;
				padding: 1px;
				display: inline-block;
				height: 12px;
				line-height: 12px;
				margin-right: 9px;
			}
			a{
				font-size: 12px;
			}
			// .sale-banner{
			// 	width: 100%;
			// }
			// .set{
			// 	position: relative;
			// 	white-space: nowrap;
			// 	span{font-size: 11px;}
			// 	li{
			// 		p{width: 100px;}
			// 		display:inline-block;
			// 		margin-right:38px;
			// 	}
			// 	.set-show{
			// 		display:inline-block;
			// 		color: #9a9c9e;
			// 		// margin-top: 10px;
			// 		em{
			// 			display: inline-block;
			// 			width: 63px;
			// 			height: 63px;
			// 			img{
			// 				overflow:hidden;
			// 				width: 100%;
			// 				height: 100%;
			// 				border: 1px solid #d8d8d8;
			// 				border-radius: 4px;
			// 			}
			// 		}
			// 	}
			// }
		}
	}
}
.select-type{
	border-top: 1px solid #e9ebef;
	border-bottom: 1px solid #e9ebef; 
	padding-left: 10px;
	padding-top: 17px;
	margin-bottom: 8px;
	.select-left{
		position: absolute;
	}
	.selected{
		padding-bottom: 15px;
		margin-left: 44px;
		position: relative;
		span{
			display: inline-block;
			margin-right: 40px;
		}
		.secure{
			margin-top: 10px;
			li{
				padding-left: 20px;
				font-size: 11px;
				background: url(../img/product-detail-sprites-mjs.png) no-repeat -84px 0;
				background-size: 100px 100px;
			}
		}
		.more{
			width: 20px;
			height: 15px;
			top: 4px;
			position: absolute;
			right: 10px;
			background: url(../img/product-detail-sprites-mjs.png) no-repeat -42px -15px;
			background-size: 100px 100px;
		}
	}
}
.address{
	border-top: 1px solid #e9ebef; 
	padding-left: 10px;
	padding-top: 17px;
	i{position: absolute;}
	.addr{
		p{
			margin-left: 44px;
			font-size: 12px;
			color: #e9321f;
			line-height: 25px;
		}
		.detail-map{
			margin-left: 44px;
			em{
				width: 17px;
				height: 19px;
				margin-left: 20px;
				position: absolute;
				background: url(../img/product-detail-sprites-mjs.png) no-repeat -10px 3px;
				background-size: 100px 100px;
			}
		}
	}
	.weight{
		padding-bottom: 10px;
		p{margin-left: 44px;}
	}
}
.jd-service{
	border-bottom: 1px solid #e9ebef;
	padding: 8px 0;
	margin-bottom: 8px;
	background: #f7f8fa;
	a{
		display: inline-block;
		margin-left: 14px;
		color: #81838e;
		font-size: 11px;
		em{
			display: inline-block;
			margin-top: 5px;
			margin-right: 5px;
			width: 12px;
			height: 12px;
			background: url(../img/product-detail-sprites-mjs.png) no-repeat -60px -82px;
			background-size: 100px 100px;
		}
		.not-sup{
			background: url(../img/product-detail-sprites-mjs.png) no-repeat -75px -82px;
			background-size: 100px 100px;
		}
	}
}
.toPic{
	padding-bottom: 50px;
	div{
		text-align: center;
		padding-bottom: 20px;
		span{font-size: 12px;}
		em{
			margin-right: 5px;
			background: url(../img/product-detail-sprites-mjs.png) no-repeat -60px -67px;
			background-size: 100px 100px;
			display: inline-block;
			width: 14px;
			height: 14px;
			vertical-align: bottom;
		}
	}
}
//mask
.mask{
	display: none;
	width: 100%;
	min-height: 100%;
	height: 120%;
	position: fixed;
	z-index: 200;
	left:0;
	top:0;
	// bottom:0;
	background: rgba(0,0,0,0.5);
}
// 点击显示的商品选择
.goods-selectable{
	display: none;
	border-top: 1px solid #dadada;
	background: #fff;
	z-index: 251;
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 70%;
	.goods-show{
		padding-bottom: 8px;
		border-bottom: 1px solid #f1f2f4;
		.goods-picture{
			border: 1px solid #f0f1f3;
			border-radius: 2px;
			width: 100px;
			height: 100px;
			position: absolute;
			left:8px;
			top:-25px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.close{
			position: absolute;
			top: 15px;
			right: 10px;
			width: 12px;
			height: 12px;
			span{
				width: 100%;
				height: 100%;
				display: inline-block;
				background: url(../img/product-detail-sprites-mjs.png) no-repeat -28px -16px;
				background-size: 100px 100px;
			}
		}
		.price{
			margin-top: 44px;
			font-size: 14px;
			font-weight: bold;
			margin-left: 120px;
		}
		.sel-weight{
			color: #81838e;
			font-size: 12px;
			margin-left: 120px;
		}
	}
	.scrollDis{
		width: 100%;
		position:absolute;
		top: 85px;
		bottom: 45px;
		overflow: auto;
	}
	.options{
		margin-left: 10px;
		padding-top: 15px;
		border-bottom: 1px solid #f1f2f4;
		li{
			font-size: 12px;
			margin-bottom: 10px;
			span{
				width: 28px; 
				position: absolute; 
			}
			.option-list{
				margin-left: 44px;
			}
			.numberOpt{
				height: 24px;
				line-height: 24px;
				display: inline-block;
				font-weight: bold;
				border: 1px solid #cbcbcb;
				border-radius: 2px;
				.numberChange{
					width: 24px;
					color: #919193;
					text-align: center;
				}
				input[type="tel"]{
					width: 34px;
					height: 100%;
					text-align: center;
					border-left: 1px solid #cbcbcb;
					border-right: 1px solid #cbcbcb;
				}
			}
			.squreBor{
				a{
					min-width: 69px;
					max-width: 98%;
					box-sizing: border-box;
					float:left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					height: 25px;
					line-height: 25px;
					margin-right: 10px;      
					border: 1px solid #bfbfbf;
					padding: 0 20px;
					border-radius: 4px;
					margin-bottom: 10px;
				}
				a.active{
					border: 1px solid #f23030;
					color: #f23030;  
				}
			}
		}
	}
	.guarantee{
		padding: 10px 10px 50px;
		ol{
			li{
				margin-bottom: 10px; 
				.service-name{
					margin-top: 20px;
					.cheap{font-size: 12px;}
					.intro{font-size: 11px;}
					em{
						display: inline-block;
						height: 14px;
						vertical-align: middle;
						width: 14px;
						margin-right: 7px;
						background: url(../img/5716ff40Nbed34a76.png) no-repeat;
						background-size: 100% 100%;
					}
					i{
						display: inline-block;
						height: 12px;
						margin-left: 5px;
						vertical-align: middle;
						width: 12px;
						background: url(../img/product-detail-sprites-mjs.png) no-repeat -28px 0;
						background-size: 100px 100px;
					}
				}
				.service-describe{
					margin-top: 10px;
					a:nth-child(2n){float: right}
					a:nth-child(2n+1){float: left}
					a{
						width: 48%;
						height: 25px;
						line-height: 25px;
						font-size: 11px;
						display: inline-block;
						margin-bottom: 10px;
						border: 1px solid #e3e5e9;
						span{
							width:50%;
							box-sizing: border-box;
							text-align: right;
							padding-right:6px;
							height: 16px;
							line-height: 16px;
							margin-top: 5px;
							border-right: 1px solid #e3e5e9;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						b{
							width:50%;
							text-align: left;
							box-sizing: border-box;
							padding-left:6px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					a.active{
						color: #f23030;
						border: 1px solid #f23030;
					}
				}
			}
		}
	}
}
.fixed-toUp{
	width: 38px;
	height: 38px;
	position: fixed;
	right: 10px;
	bottom: 60px;
	img{
		width: 100%;
		height: 100%;
	}
}
.fixed-footer{
	z-index: 999;
	height: 50px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	.footer-left,.footer-right{
		width: 50%;
		height: 100%;
	}
	.footer-left{
		background: rgba(255,255,255,0.9);
		a{
			width: 33%;
			text-align: center;
			float: left;
			color: #232326;
			em{
				width: 17px;
				height: 17px;
				display: block;
				margin: 9px auto 0;
				background: url(../img/product-detail-sprites-mjs.png) no-repeat -14px -50px;
				background-size: 100px 100px;
			}
		}
	}
	.footer-right{
		line-height: 50px;
		a{
			float: left;
			width: 50%;
			color: #fff;
			text-align: center;
		}
		.add{background: #ffb03f;}
		.buy{background: #f23030;}
	}
}
